import { DndProvider } from 'react-dnd';
import { Row, Col, Button } from 'antd';

import { HTML5Backend } from 'react-dnd-html5-backend';
import React, { FC, useContext, useEffect, useState } from 'react';

import { DesignProvider, DesignRedux } from '../DesignRedux';
import RightForm from '../RightForm';
import LeftBtn from '../LeftBtn';
import CenterDesign from '../CenterDesign';
import ExportSchemaModal from '../ExportSchemaModal';
import ImportSchemaModal from '../ImportSchemaModal';
import DownCode from '../DownCode';
import style from './index.less';

import { coachTreeMock, leftArrMock } from '../../mock';

let coachTree = coachTreeMock;
const leftArr = leftArrMock;

const DesignIndex: FC = () => {
  const [cardList, setCardList] = useState<any[]>(coachTree);
  const { state, dispatch } = useContext(DesignRedux);
  const [exportModalVisible, setExportModalVisible] = useState(false); // 导出弹框
  const [importModalVisible, setImportModalVisible] = useState(false); // 导入 schema 弹框

  const { nodeTree } = state;

  useEffect(() => {
    dispatch({ nodeTree: coachTree });
  }, []);

  useEffect(() => {
    setCardList(state.nodeTree);
  });

  // 显示导出弹框
  const onClickShowExport = () => {
    setExportModalVisible(true);
  };

  // 关闭导出弹框
  const onCancelExport = () => {
    setExportModalVisible(false);
  };

  // 显示导入弹框
  const onClickShowImport = () => {
    setImportModalVisible(true);
  };

  // 关闭导入弹框
  const onCancelImport = () => {
    setImportModalVisible(false);
  };

  // 确认导入弹框
  const onOkImport = () => {
    setImportModalVisible(false);
  };

  // 值回调
  const changeCardList = (param: any) => {
    const { currentNode, dropResult } = param;
    const { status: cStatus } = currentNode;
    const { id: dId } = dropResult;
    const newState = [...state.nodeTree];
    // 添加
    if (cStatus === 'add') {
      // 容器组件
      addNodeItem(newState, currentNode, dId);
      dispatch({ nodeTree: newState });
    }
    // debugger;
    // setCardList(JSON.parse(JSON.stringify(newState)));
  };

  // 容器组件添加子组件
  function addNodeItem(data, node, id) {
    for (const item of data) {
      const { children = [] } = item;
      if (item.id === id) {
        item.children = [...children, node];
      }
      if (item.id !== id && children) {
        addNodeItem(children, node, id);
      }
    }
  }

  return (
    <DndProvider backend={HTML5Backend}>
      <div className={style.container}>
        {/*按钮区域*/}
        <div className={style.qhDesignLeft}>
          {leftArr.map((rowItem: object, index: number) => {
            return (
              <div key={index.toString()}>
                <h4
                  key={`p+${index.toString()}`}
                  style={{ marginTop: 8, marginBottom: 8 }}
                >
                  {rowItem.title}
                </h4>
                <Row key={index.toString()} gutter={[8, 8]}>
                  {rowItem.arrItem.map((aItem: object, aIndex: number) => {
                    return (
                      <Col span={12} key={aIndex.toString()}>
                        <LeftBtn {...aItem} changeCardList={changeCardList} />
                      </Col>
                    );
                  })}
                </Row>
              </div>
            );
          })}
        </div>

        {/*设计区域*/}
        <div className={style.qhDesignCenter}>
          <DownCode />
          <Button onClick={onClickShowImport}>导入schema</Button>
          <Button onClick={onClickShowExport}>导出schema</Button>

          {/*代码设计器*/}
          <div className={style.qhDesignBody}>
            <CenterDesign cardList={cardList} />
          </div>
        </div>

        {/*属性*/}
        <div className={style.qhDesignRight}>
          <RightForm />
        </div>
      </div>

      {/*导出 schema */}
      <ExportSchemaModal
        visible={exportModalVisible}
        schema={cardList} // schema
        onClose={onCancelExport}
      />

      {/*导入 schema */}
      <ImportSchemaModal
        visible={importModalVisible}
        onClose={onCancelImport}
        onOk={onOkImport}
        ZtFooter
      />
    </DndProvider>
  );
};

export default DesignIndex;
